<template>
  <div>
    <el-form :model="product" class="product-form">
      <h3>{{ (index + 1) + ' 意向合作商品' }}</h3>
      <el-form-item label="商品品牌" >
        <el-input v-model="product.brand" placeholder="请输入商品品牌，没有写‘无’"></el-input>
      </el-form-item>
      <el-form-item label="商品名称:" >
        <el-input v-model="product.name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品规格:" >
        <el-input v-model="product.specifications" placeholder="请输入商品规格"></el-input>
      </el-form-item>
      <el-form-item label="商品条形码:" >
        <el-input v-model="product.barcode" placeholder="请输入商品条形码，若无可填‘无’"></el-input>
      </el-form-item>
      <el-form-item label="供货价:" >
        <el-input v-model="product.supplyPrice" placeholder="请输入供货价"></el-input>
      </el-form-item>
      <el-form-item label="市场零售价:" >
        <el-input v-model="product.retailPrice" placeholder="请输入市场零售价"></el-input>
      </el-form-item>
      <el-form-item label="推荐给补贴的理由:" >
        <el-input v-model="product.reason" placeholder="请输入商品竞争优势"></el-input>
      </el-form-item>
      <el-form-item label="商品附件:">
        <el-upload
          :action="uploadAction"
          :on-success="handleFileUpload"
          :file-list="product.fileList"
          :data="() => ({ index })"
        >
          <el-button type="primary">上传文件</el-button>
        </el-upload>
        <p>请上传优势证明文件，如获奖、市场接受度、平台销售数据等</p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { defineProps, defineEmits } from 'vue';

export default {
  setup() {
    const props = defineProps({
      product: {
        type: Object,
        required: true
      },
      index: {
        type: Number,
        required: true
      },
      uploadAction: {
        type: String,
        required: true
      }
    });

    const emit = defineEmits(['update-file-list']);

    const handleFileUpload = (response, file, fileList) => {
      emit('update-file-list', { index: props.index, fileList });
    };

    return {
      ...props,
      handleFileUpload
    };
  }
};
</script>

<style scoped>
.product-form {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
}
</style>
